
<!DOCTYPE html>
<html class="login-bg" xmlns:th="http://www.thymeleaf.org">
<head>
	<title>后台管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <!-- bootstrap -->
    <link th:href="@{/css/bootstrap/bootstrap.css}" rel="stylesheet">
    <!--<link th:href="@{/css/bootstrap/bootstrap-responsive.css}" rel="stylesheet">-->
    <link th:href="@{/css/bootstrap/bootstrap-overrides.css}" type="text/css" rel="stylesheet">

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/compiled/layout.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/compiled/elements.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/compiled/icons.css}">

    <!--toastr-->
    <link rel="stylesheet" th:href="@{/js/toastr/toastr.min.css}"/>

    <!-- libraries -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/lib/font-awesome.css}">

    <!-- this page specific styles -->
    <link rel="stylesheet" th:href="@{/css/compiled/signup.css}" type="text/css" media="screen" />

    <!-- open sans font -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div class="header">
        <a th:href="@{/login}">
            <img th:src="@{/img/logo.png}" class="logo" />
        </a>
    </div>
    <div class="login-wrapper">
        <div class="box">
            <form th:action="@{/user/add}" th:method="post" id="userForm">
                <div class="content-wrap">
                    <h6>用户注册</h6>
                    <input class="form-control" type="text" placeholder="用户名" name="nickname" id="nickname">
                    <input class="form-control" type="text" placeholder="邮箱" name="email" id="email">
                    <input class="form-control" type="password" placeholder="密码" name="pswd" id="pswd">
                    <input class="form-control" type="password" placeholder="密码确认" id="pswdTwo">
                    <span id="msg"></span>
                    <div class="action">
                        <button class="btn-glow primary signup ">立即注册</button>
                    </div>
                </div>
            </form>

        </div>

        <div class="already">
            <p>Already have an account?</p>
            <a th:href="@{/login}">Sign in</a>
        </div>
    </div>

	<!-- scripts -->
    <script th:src="@{/js/jquery-1.11.3.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/theme.js}"></script>
    <script th:src="@{/js/toastr/toastr.min.js}"></script>
    <script th:src="@{/js/main.js}"></script>

    <script>
        $("#pswdTwo").change(function () {
            if($("#pswdTwo").val() != $("#pswd").val()){
                $("#msg").html("密码不一致！");
            }else{
                $("#msg").html("");
            }
        })

        $(".signup").click(function(){
            $.ajax({
                url:"/signupUser",
                type:"post",
                data:$("#userForm").serialize(),
                dataType:"json",
                beforeSend:function () {
                    $(".signup").attr('disabled','disabled');
                    $(".signup").text("注册中...");
                },
                success:function(data){
                    if (data.status == 200) {
                        toastr.options.onHidden = function () {
                            location.href = '/login';
                        }
                        toastr.success('注册用户成功！');
                    } else {
                        toastr.error('注册用户失败！');
                    }
                },
                error:function(){
                    toastr.error('注册用户失败！');
                }

            });
        })
    </script>
</body>
</html>